<template>
  <div class="stack-echart">
    <div class="xg" id="xingwei1"></div>
    <div class="xg" id="xingwei2"></div>
    <div class="xg" id="xingwei3"></div>
    <div class="xg" id="xingwei4"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    var xingwei1Dom = document.getElementById("xingwei1");
    var xingwei1Chart = echarts.init(xingwei1Dom);
    var option1 = {
      color: ["#80FFA5"],
      title: {
        text: "习惯a",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },

      grid: {
        left: "12%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [
            "宿舍307",
            "牛肉面",
            "化学楼教室124",
            "花式炒饭",
            "8号教学楼",
            "宿舍307",
          ],
          axisLabel: {
            interval: 0,
             rotate: 30,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle:{
              color:'rgb(255,255,255,0.8)'
            },
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: { show: false }, //去除网格线
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [140,  101, 264, 90, 340, 250],
        },
      ],
    };
    option1 && xingwei1Chart.setOption(option1);

    var xingwei2Dom = document.getElementById("xingwei2");
    var xingwei2Chart = echarts.init(xingwei2Dom);
    var option2 = {
      color: ["#37A2FF"],
      title: {
        text: "习惯b",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      grid: {
       left: "12%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [
            "宿舍307",
            "蒸包蒸饺",
            "吧台左",
            "3号教学楼",
            "花式炒饭",
            "7号教学楼",
            "宿舍307",
          ],
          axisLabel: {
            interval: 0,
             rotate: 30,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle:{
              color:'rgb(255,255,255,0.8)'
            },
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: { show: false }, //去除网格线
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(55, 162, 255)",
              },
              {
                offset: 1,
                color: "rgb(116, 21, 219)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [140, 150, 101, 184, 90, 100, 150],
        },
      ],
    };
    option2 && xingwei2Chart.setOption(option2);

    var xingwei3Dom = document.getElementById("xingwei3");
    var xingwei3Chart = echarts.init(xingwei3Dom);
    var option3 = {
      color: ["#80FFA5"],
      title: {
        text: "习惯c",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },

      grid: {
       left: "12%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [
            "宿舍307",
            "蒸包蒸饺",
            "吧台左",
            "3号教学楼",
            "精品套餐",
            "8203",
            "宿舍307",
          ],
          axisLabel: {
            interval: 0,
             rotate: 30,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
        lineStyle:{
              color:'rgb(255,255,255,0.8)'
            },
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: { show: false }, //去除网格线
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
            offset: 0,
            color: 'rgb(85, 200, 5)'
          },
          {
            offset: 1,
            color: 'rgb(126, 121, 90)'
          }
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [200, 232, 101, 154, 90, 340, 250],
        },
      ],
    };
    option3 && xingwei3Chart.setOption(option3);

    var xingwei4Dom = document.getElementById("xingwei4");
    var xingwei4Chart = echarts.init(xingwei4Dom);
    var option4 = {
      color: ["#37A2FF"],
      title: {
        text: "习惯d",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      grid: {
       left: "12%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [
            "宿舍307",
            "蒸包蒸饺",
            "吧台左",
              "7号教学楼",       
            "烧鹅饭",
             "3号教学楼",
            "宿舍307",
          ],
          axisLabel: {
            interval: 0,
             rotate: 30,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
          lineStyle:{
              color:'rgb(255,255,255,0.8)'
            },
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: { show: false }, //去除网格线
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: [140, 150, 161, 154, 90, 100, 150],
        },
      ],
    };
    option4 && xingwei4Chart.setOption(option4);
  },
};
</script>
<style scoped>
.stack-echart {
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
}
.xg{
  padding-left: 15px;
}
#xingwei1 {
  float: left;
  width: 300px;
  height: 150px;
}
#xingwei2 {
  float: left;
  width: 300px;
  height: 150px;
}
#xingwei3 {
  float: left;
  width: 300px;
  height: 150px;
}
#xingwei4 {
  float: left;
  width: 300px;
  height: 150px;
}
</style>
